<template>
	<view class="bigimgbox">
		<view>
			<up-action-sheet @select="(e)=>{
					caozuo(e)
				}" :actions="list" :show="longshow"></up-action-sheet>
		</view>
		<up-overlay :show="show" @click="show = false">
			<view class="warp">
				<image mode="aspectFit" :src="activeimg.src"></image>
			</view>
		</up-overlay>
		<view @longpress="long(item)" @tap="look(item)" class="imgbox" v-for="item in mvlist" :key="item.id">
			<image :lazy-load="true" mode="aspectFill" :src="item.src"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	let show = ref(false)
	let longshow = ref(false)
	let activeimg = ref({})
	const list = ref([
		{
			name: '下载本地',
		},
		{
			name: '不想看见',
			color: 'red',

		},
		{
			name: '取消',
		},
	]);

	let mvlist = ref([
		{ id: 1, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5kQomn7WJMw3qQS7rLvI5S0eYesAeQ10gBtS2YgEeTgaaHCGX5Pre0AHVtLwNjcGhFzn2GDiKyiwT9mUgaqUgBI!/b&bo=PwGBAQAAAAADB5w!&rf=viewer_4' },
		{ id: 2, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWhJb1RJUC3VgjLhcXo8p5dXYDlQKxGb0*LnJJrMy2oqHeBWX8Ak4ha9r6hRhRmw18s!/b&bo=QAGBAQAAAAADB.M!&rf=viewer_4' },
		{ id: 3, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWig5*71.h0SRYr7jxVbdoVDfPbyCdekT3eMWwwMcXTU6*.GU..OWn6Da9sIUqdjDoc!/b&bo=PwGAAQAAAAADB50!&rf=viewer_4' },
		{ id: 4, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5id*4Z5NELFVRx60QEvlXWjCln38ayQ2jL46xle9ZqASNUFfa56NTeORHnPiLkMZZ*K95YXFSMacDJrGfapF6jM!/b&bo=QAGBAQAAAAADB.M!&rf=viewer_4' },
		{ id: 5, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5kQomn7WJMw3qQS7rLvI5S0h*IqDLPI.ZAVJPzTrB1NLnUaVlzhzzBKunSmFNSreHN9ZB2*1HtxxdoI5lusV*.Q!/b&bo=lwLvAAAAAAADB1g!&rf=viewer_4' },
		{id:6,src:'https://img1.baidu.com/it/u=1676272925,3596227179&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=611'},
		{id:7,src:'https://img2.baidu.com/it/u=3642655995,25044315&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=719'},
		{id:8,src:'https://img2.baidu.com/it/u=3792059026,1551377624&fm=253&fmt=auto?w=800&h=500'},
		{id:9,src:'https://img1.baidu.com/it/u=3782985739,2433396756&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200'},
		{id:10,src:'https://img1.baidu.com/it/u=1056251398,4066691768&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'},
		{id:11,src:'https://img2.baidu.com/it/u=50702812,123398316&fm=253&fmt=auto?w=800&h=500'},
		{id:12,src:'https://img0.baidu.com/it/u=436873728,3197551997&fm=253&fmt=auto?w=800&h=500'},
		{id:13,src:'https://img0.baidu.com/it/u=1248793250,92133811&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
		{id:14,src:'https://img1.baidu.com/it/u=425212747,4152809089&fm=253&fmt=auto?w=1280&h=800'},
		{id:15,src:'https://img1.baidu.com/it/u=4140964787,1726709972&fm=253&fmt=auto?w=800&h=500'},
		{id:16,src:'https://img0.baidu.com/it/u=2583098292,2956502911&fm=253&fmt=auto?w=1280&h=800'},
		{id:17,src:'https://img1.baidu.com/it/u=2793781334,3943202029&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'},
		{id:18,src:'https://img1.baidu.com/it/u=2937431534,512440527&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=723'},
		{id:19,src:'https://img1.baidu.com/it/u=4152338262,2268846716&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=394'},
		{id:20,src:'https://img1.baidu.com/it/u=3015014199,830433033&fm=253&fmt=auto?w=1280&h=800'},
		{id:21,src:'https://img2.baidu.com/it/u=318089146,190685299&fm=253&fmt=auto?w=1280&h=800'},
		{id:22,src:'https://img1.baidu.com/it/u=360573650,1060229127&fm=253&fmt=auto?w=1280&h=800'},
		{id:23,src:'https://img1.baidu.com/it/u=2156347588,3588229493&fm=253&fmt=auto?w=1280&h=800'},
		{id:24,src:'https://img2.baidu.com/it/u=3832029804,3935074750&fm=253&fmt=auto?w=1280&h=800'},
		{id:25,src:'https://img0.baidu.com/it/u=3144584513,1847457737&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'},
		{id:26,src:'https://img0.baidu.com/it/u=1244212094,3734765644&fm=253&fmt=auto?w=1280&h=800'},
		{id:27,src:'https://img2.baidu.com/it/u=3044701319,834230494&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
		{id:28,src:'https://img2.baidu.com/it/u=1437735997,1684110817&fm=253&fmt=auto?w=800&h=500'},
		{id:29,src:'https://img1.baidu.com/it/u=137072319,1304096211&fm=253&fmt=auto?w=1280&h=800'},
		{id:30,src:'https://img1.baidu.com/it/u=2617711980,1741398786&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
		{id:31,src:'https://img2.baidu.com/it/u=1899161301,1601532745&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'},
		{id:32,src:'https://img1.baidu.com/it/u=2390719233,725674474&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500'},
		{id:33,src:'https://img2.baidu.com/it/u=266304000,1319053524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1200'},
		{id:34,src:'https://img2.baidu.com/it/u=2651469512,3090512685&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749'},
		{id:35,src:'https://ww1.sinaimg.cn/mw690/c158b87aly1hhtxj1vim0j21jk2bcavo.jpg'},
		{id:36,src:'https://img2.baidu.com/it/u=2853950874,3013380254&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'},
		{id:37,src:'https://img0.baidu.com/it/u=4088755768,1360534210&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'},
		{id:73,src:'https://img0.baidu.com/it/u=417614125,1636062132&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'},
		{id:74,src:'https://img0.baidu.com/it/u=1416810478,1110486115&fm=253&fmt=auto&app=138&f=JPEG?w=790&h=500'},
		{id:75,src:'https://img2.baidu.com/it/u=456222918,2363158333&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500'},
		{id:76,src:'https://img1.baidu.com/it/u=95163692,2786124216&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'},
		{id:77,src:'https://img2.baidu.com/it/u=2856695286,2470369496&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'},
		{id:78,src:'https://img0.baidu.com/it/u=1076900872,1219261296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'},
		{id:79,src:'https://img0.baidu.com/it/u=2558721335,809627750&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=668'},
		{id:170,src:'https://img1.baidu.com/it/u=1883022039,776321706&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'},
		{id:711,src:'https://img.zcool.cn/community/013d805f5b6c7e11013e31871c4c6f.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100'},
		{id:722,src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F78552cc1-8cb2-417f-b485-0bd9721a546b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1718347237&t=f68c0dfa774441f2979b84e2218f2e7c'},
		{id:733,src:'https://img2.baidu.com/it/u=1608666696,3902604087&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'},
		{id:744,src:'https://img0.baidu.com/it/u=2157823801,2784403887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=695'},
		{id:755,src:'https://img1.baidu.com/it/u=2191812071,2904999125&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'},
		{id:766,src:'https://img0.baidu.com/it/u=1740404349,3315060436&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'},
		{id:777,src:'https://img0.baidu.com/it/u=1526951327,3898207556&fm=253&fmt=auto&app=138&f=JPEG?w=334&h=500'},
		{id:788,src:'https://img0.baidu.com/it/u=4261596919,3088071447&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
		{ id:789, src: 'http://a1.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5m0cXg6l0GDYvNCMD4W.Ty48dsN9ktQ2hGH.GcPKU..n.BDo8my850g4FXaCpNgHpLCH.*Sb79I72s1uY8x25bw!/b&ek=1&kp=1&pt=0&bo=SgF1AQAAAAADJz0!&tl=1&vuin=3225605824&tm=1715565600&dis_t=1715567529&dis_k=8c2e6cf5231cd7a9688c7d1b55946ebc&sce=60-1-1&rf=viewer_4', title: '女性职业形象照', price: 120 },
		{ id:790, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5huEq.Xs7zt6UcDbsUdhrJ9w1gfT8aIu3knpEDRfPbS*9T9c2o0DO9ghsyBLT4KVTNPs3bDQew1Fd8Ofb5b4vus!/b&bo=SgF1AQAAAAADBx0!&rf=viewer_4' },
		{ id: 877, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5lcC7jymtoTZ7dezKeUGgMu9J6qdHZd2utOsnppRb54cqjvRKoX9mhq1Ujl*p4AMEmkXaXtueTguZgRPx9TiBTI!/b&bo=SgF1AQAAAAADBx0!&rf=viewer_4' },
		{ id: 984, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsbPo5deagbVlPalniqSfYw6GWd0TPidWqVwMgsOZhUQxoYWjAh9vwmHsJ17M1dNaqw!/b&bo=SgF1AQAAAAADJz0!&rf=viewer_4' },
		{ id: 885, src: 'http://m.qpic.cn/psc?/V50sCALs4B1NTU1z389N4Xr59V2fkY7X/ruAMsa53pVQWN7FLK88i5iHoYxTnRqpyV1QkE6iEdsYM62TbirTrwjrkP.Z9noW6cbsyadCCDHCgi1lsElkcMd59Ku7QEZHH01tYjaQYdpY!/b&bo=rwIkAQAAAAADN5o!&rf=viewer_4' },
		{id:1111,src:'https://img0.baidu.com/it/u=1508473966,249069563&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500'},
		{id:3231,src:'https://img1.baidu.com/it/u=1400678928,3501514744&fm=253&fmt=auto&app=120&f=JPEG?w=1127&h=800'},
		{id:3121,src:'https://img1.baidu.com/it/u=3682511392,358206753&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666'},
		{id:4214,src:'https://img1.baidu.com/it/u=273092046,2242934352&fm=253&fmt=auto&app=120&f=JPEG?w=674&h=500'},
		{id:52332,src:'https://img1.baidu.com/it/u=4221381101,53440456&fm=253&fmt=auto&app=138&f=JPEG?w=492&h=300'},
		{id:1433,src:'https://img1.baidu.com/it/u=392002995,444167883&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:3212,src:'https://img0.baidu.com/it/u=520826692,405990345&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=710'},
		{id:4343,src:'https://img0.baidu.com/it/u=1648910111,2133388050&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:8782,src:'https://img1.baidu.com/it/u=393571910,3827942770&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:5325,src:'https://img0.baidu.com/it/u=41633256,3766416949&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:2322,src:'https://img2.baidu.com/it/u=2465539263,2624891008&fm=253&fmt=auto&app=138&f=JPEG?w=493&h=300'},
		{id:2141,src:'https://img2.baidu.com/it/u=1582927315,3083427103&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:3555,src:'https://img1.baidu.com/it/u=4149623857,260649362&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400'},
		{id:66643,src:'https://img0.baidu.com/it/u=3774881587,1491146958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'},
		{id:32432,src:'https://img2.baidu.com/it/u=3438716605,1009926180&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'},
		{id:5325,src:'https://img0.baidu.com/it/u=1438273159,2603737484&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'},
		{id:11121,src:'https://img2.baidu.com/it/u=2161858293,228808354&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667'},
		{id:11411,src:'https://img1.baidu.com/it/u=1518185612,210888310&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500'},
		{id:132111,src:'https://img0.baidu.com/it/u=3591533804,4255312682&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:114311,src:'https://img1.baidu.com/it/u=1422426623,362451267&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
		{id:11141,src:'https://img1.baidu.com/it/u=3058735397,2185255113&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400'},
		{id:111311,src:'https://img0.baidu.com/it/u=4061335375,1776386195&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=750'},
		{id:112311,src:'https://img0.baidu.com/it/u=168391100,1422229339&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500'},
		{id:112311,src:'https://img2.baidu.com/it/u=556851647,3627304917&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800'},
	])
	let caozuo = (e:any) => {
		if (e.name === '下载本地') {
	
			uni.downloadFile({
				url: activeimg.value.src, //仅为示例，并非真实的资源
				success: (res) => {
					if (res.statusCode === 200) {
						console.log('下载成功');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, // 下载成功后的临时文件路径
							success: () => {
								console.log('图片保存成功');
								longshow.value = false
							},
							fail: (err) => {
								console.error('图片保存失败', err);
								longshow.value = false
							}
						});
					}
				}, fail(res) {
					console.log(res)
				}

			});
		}
		if(e.name==='不想看见'){
			
			let i=mvlist.value.findIndex(ele=>ele.id===activeimg.value.id)
			console.log(i)
			mvlist.value.splice(i,1)
			longshow.value=false
			
		}
		if(e.name==='取消'){
				longshow.value=false
		}
	}
	let long = (item : any) => {

		let a = setTimeout(() => {
			activeimg.value = item
			longshow.value = true
			clearTimeout(a)
		}, 1000)

	}
	let look = (item : any) => {
		show.value = true
		activeimg.value = item
	}
	let suiji=(list: any)=>{
		 return list.sort(() => Math.random() - 0.5);
	}
	

	
		onMounted(()=>{
		suiji(mvlist.value)
	
	})

</script>

<style scoped>
		.wrap {
			/* height: 200vh; */
		}
	.imgbox:active {
		box-shadow: 0 0 0 3rpx gray;
	}

	.imgbox image {
		width: 360rpx;
		height: 380rpx;
	}

	.imgbox {
		width:  360rpx;
		height:380rpx;
		margin-left: 10rpx;	
		margin-top: 10rpx;
		}

	.bigimgbox {
		display: flex;
		flex-wrap: wrap;

	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.warp image {
		height: 100%;
	}
</style>